<template>
  <!-- 下发指令 -->
  <h-modal class="event-modal" v-model.lazy="show" title="下发指令" @submit="submit">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="100">
        <!--  -->
        <a-col :span="24" v-if="showDept">
          <a-form-model-item label="第三方公司" prop="thirdId" v-if="action == 'video'">
            <a-select v-model="form.thirdId" placeholder="请选择">
              <a-select-option :key="item.id" :value="item.id" v-for="item in componey">{{ item.companyName }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="第三方公司" prop="departIdList" v-else>
            <a-select mode="multiple" v-model="form.departIdList" placeholder="请选择">
              <a-select-option :key="item.id" :value="item.id" v-for="item in componey">{{ item.companyName }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="action == 'video'">
          <a-form-model-item label="指令内容" prop="instruction">
            <a-textarea :rows="5" v-model.lazy="form.instruction" placeholder="请输入指令内容"></a-textarea>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-else>
          <a-form-model-item label="指令内容" prop="askContent">
            <a-textarea :rows="5" v-model.lazy="form.askContent" placeholder="请输入指令内容"></a-textarea>
          </a-form-model-item>
        </a-col>
      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
import { addOrder, getThirdName, addVideoinstruction } from '@/api/serve';
import cloneDeep from 'lodash/cloneDeep';

export default {
  props: {
    showDept: {
      type: Boolean,
      default: false
    },
    showModal: {
      type: Boolean,
      default: false
    },
    departId: {
      type: [String, Number],
      defalut: ''
    },
    id: {
      type: String,
      defalut: ''
    },
    formData: {
      type: Object,
      default: () => {}
    },
    action: {
      default: '',
      type: String
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    },
    departId: {
      handler(val) {
        console.log('val', val);
        this.departIds = val;
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      moment,
      departIds: '',
      show: false,
      deptArr: [],
      dept: [],
      form: {},
      rules: {
        interval: [{ required: true, message: '请输入' }],
        departIdList: [{ required: true, message: '请选择' }],
        thirdId: [{ required: true, message: '请选择' }]
      },
      componey: []
    };
  },
  created() {
    this.getThirdName();
  },
  methods: {
    getThirdName() {
      getThirdName().then(res => {
        this.componey = res.data;
        this.form.thirdId = res.data[0].id;
        this.form.departIdList = res.data[0].id;
      });
    },
    edit(formData) {
      this.form = cloneDeep(formData);
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.action == 'video') {
            addVideoinstruction({ thirdId: [this.departIds], ...this.form, eventId: this.id }).then(res => {
              this.$message.success('下发成功');
              this.show = false;
              this.form = {};
              this.$emit('submit', true);
            });
          } else {
            addOrder({ ...this.form, departIdList: [this.departIds], eventId: this.id }).then(res => {
              this.$message.success('下发成功');
              this.show = false;
              this.form = {};
              this.$emit('submit', true);
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style>

</style>
